<template>
	<view class="container">
		<!-- Top scanning section -->
		<view class="top-section">
			<view class="scan-section">
				<!-- <view class="scan-title">扫描托盘</view> -->
				<view class="s-input-box flex-row-between s-w">
					<input 
						auto-focus="true" 
						v-model="scanCode" 
						class="s-input scan-input flex1" 
						placeholder="请输入或扫描料架号"
						:disabled="isLoading"
					/>
					<image 
						v-if="scanCode" 
						class="s-input-icon clear-icon" 
						src="/static/images/clear.png" 
						@click="handleClear"
					></image>
					<image 
						class="s-input-icon s-i" 
						src="/static/images/scan.png"
						@click="handleScanClick"
					></image>
				</view>
			</view>

	<!-- 		<view class="info-section" v-if="trayNo">
				<view class="info-item">
					<text class="info-label">托盘号：</text>
					<text class="info-value">{{ trayNo }}</text>
				</view>
				<view class="info-item">
					<text class="info-label">物料数量：</text>
					<text class="info-value">{{ materials.length }} 种</text>
				</view>
			</view> -->
		</view>

		<!-- Loading state -->
		<view class="loading-container" v-if="isLoading">
			<view class="loading-spinner"></view>
			<text class="loading-text">加载中...</text>
		</view>

		<!-- Materials list -->
		<scroll-view 
			scroll-y 
			class="materials-list" 
			v-else-if="materials.length"
			:refresher-enabled="true"
			:refresher-triggered="isRefreshing"
			@refresherrefresh="handleRefresh"
			v-if="false"
		>
			<view class="material-card" v-for="(item, index) in materials" :key="index">
				<!-- <view class="material-header">物料信息</view> -->
				<view class="material-content">
					<view class="material-row">
						<text class="label">物料编号</text>
						<text class="value">{{ item.productNo }}</text>
					</view>
					<view class="material-row">
						<text class="label">物料名称</text>
						<text class="value">{{ item.productName }}</text>
					</view>
					<view class="material-row">
						<text class="label">数量</text>
						<text class="value">{{ item.qty }}</text>
					</view>
					<view class="material-row">
						<text class="label">批次号</text>
						<text class="value">{{ item.batchNo }}</text>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- Empty state -->
	<!-- 	<view class="empty-state" v-else-if="!isLoading">
			<image class="empty-image" src="/static/images/empty.png"></image>
			<text class="empty-text">暂无托盘信息</text>
		</view> -->

		<!-- Fixed bottom area -->
		<view class="fixed-bottom">
			<!-- Bottom scanning section -->
			<!-- 		<view class="bottom-section">
				<view class="scan-title">扫描新托盘</view>
				<input type="text" v-model="newTrayCode" placeholder="请扫描新托盘码" class="scan-input"
					@confirm="handleNewTrayScan" />
			</view> -->

			<!-- Submit button -->
			<!-- // :class="{'disabled': !scanCode || isLoading}" -->
			<button 
				class="submit-btn" 
				@tap="handleSubmit"
			>
				{{ isLoading ? '处理中...' : '解 绑' }}
			</button>
		</view>
	</view>
</template>

<script>
	import {
		getBillTrayDetailList,
		clearBillTrayByNo,
		unbindTrayNo
	} from "./api"
	
	export default {
		data() {
			return {
				scanCode: '',
				newTrayCode: '',
				trayNo: '',
				materials: [],
				isLoading: false,
				isRefreshing: false
			};
		},
		methods: {
			handleClear() {
				this.scanCode = '';
				this.trayNo = '';
				this.materials = [];
			},
			
			handleScanClick() {
				// 触发扫码功能
				uni.scanCode({
					success: (res) => {
						this.scanCode = res.result;
						this.handleScan();
					},
					fail: () => {
						this.$modal.msg("扫码失败，请重试");
					}
				});
			},
			
			handleScan() {
				if (!this.scanCode) {
					this.$modal.msg("请输入正确托盘号");
					return;
				}

				this.isLoading = true;
				getBillTrayDetailList({
					containerNo: this.scanCode
				}).then(res => {
					if (res.code == 200) {
						this.trayNo = this.scanCode;
						this.materials = res.rows || [];
					} else {
						res.msg && this.$modal.confirmClose(res.msg);
					}
				}).catch(err => {
					this.$modal.msg("获取托盘信息失败");
				}).finally(() => {
					this.isLoading = false;
				});
			},
			
			handleRefresh() {
				this.isRefreshing = true;
				this.handleScan();
				setTimeout(() => {
					this.isRefreshing = false;
				}, 1000);
			},
			
			handleSubmit() {
				if (!this.scanCode) {
					this.$modal.msg('料架号不能为空');
					return;
				}
				
				if (this.isLoading) return;
				
				this.$modal.confirm('是否确认解绑？').then(() => {
					this.isLoading = true;
					unbindTrayNo({
						containerNo: this.scanCode
					}).then(res => {
						if (res.code == 200) {
							this.$modal.msg(res.msg);
							this.handleClear();
						} else {
							res.msg && this.$modal.confirmClose(res.msg);
						}
					}).catch(err => {
						this.$modal.msg("解绑失败，请重试");
					}).finally(() => {
						this.isLoading = false;
					});
				});
			}
		}
	}
</script>

<style lang="scss">
	.container {
		min-height: 100vh;
		background-color: #F0F2F5;
		position: relative;
		padding-bottom: 240rpx; // 为固定底部区域留出空间

		.top-section {
			padding: 30rpx 20rpx;
			background: linear-gradient(180deg, #99cfd6 0%, #4599ad 100%) !important;
		}

		.scan-section {
			background-color: #FFFFFF;
			padding: 24rpx;
			border-radius: 16rpx;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
			margin-bottom: 20rpx;

			.scan-title {
				font-size: 28rpx;
				color: #333;
				margin-bottom: 16rpx;
				font-weight: 500;
			}
		}

		.scan-input {
			background-color: #F8F9FA;
			height: 80rpx;
			padding: 0 24rpx;
			border-radius: 8rpx;
			font-size: 28rpx;
			border: 2rpx solid #E5E6EB;

			&::placeholder {
				color: #C9CDD4;
			}
		}

		.info-section {
			background-color: #FFFFFF;
			padding: 24rpx;
			border-radius: 16rpx;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

			.info-item {
				display: flex;
				align-items: center;
				margin-bottom: 16rpx;

				&:last-child {
					margin-bottom: 0;
				}

				.info-label {
					font-size: 28rpx;
					color: #666;
					width: 120rpx;
				}

				.info-value {
					font-size: 28rpx;
					color: #333;
					font-weight: 500;
				}
			}
		}

		.loading-container {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 40rpx 0;

			.loading-spinner {
				width: 60rpx;
				height: 60rpx;
				border: 4rpx solid #f3f3f3;
				border-top: 4rpx solid #4599ad;
				border-radius: 50%;
				animation: spin 1s linear infinite;
			}

			.loading-text {
				margin-top: 20rpx;
				color: #666;
				font-size: 28rpx;
			}
		}

		.materials-list {
			padding: 20rpx;
			max-height: calc(200vh - 800rpx);

			.material-card {
				background-color: #FFFFFF;
				border-radius: 16rpx;
				margin-bottom: 20rpx;
				box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
				overflow: hidden;

				.material-header {
					padding: 20rpx 24rpx;
					background-color: #F8F9FA;
					font-size: 28rpx;
					color: #333;
					font-weight: 500;
					border-bottom: 2rpx solid #E5E6EB;
				}

				.material-content {
					padding: 24rpx;
				}

				.material-row {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 16rpx;
					font-size: 28rpx;

					&:last-child {
						margin-bottom: 0;
					}

					.label {
						color: #666;
					}

					.value {
						color: #333;
						font-weight: 500;
					}
				}
			}
		}

		.empty-state {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 100rpx 0;

			.empty-image {
				width: 200rpx;
				height: 200rpx;
				margin-bottom: 20rpx;
			}

			.empty-text {
				color: #999;
				font-size: 28rpx;
			}
		}

		.fixed-bottom {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: #FFFFFF;
			padding: 24rpx 20rpx;
			box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.05);
		}

		.submit-btn {
			height: 88rpx;
			line-height: 88rpx;
			background: #4599ad;
			color: #FFFFFF;
			border-radius: 10rpx;
			font-size: 32rpx;
			text-align: center;
			font-weight: 500;
			box-shadow: 0 4rpx 12rpx rgba(46, 92, 254, 0.3);
			transition: all 0.3s;

			&.disabled {
				background: #CCCCCC;
				box-shadow: none;
			}

			&:active:not(.disabled) {
				transform: scale(0.98);
			}
		}
	}

	.nodata-label {
		text-align: center;
		margin-top: 40rpx;
		color: #999999;
	}
	.s-input-box {
			position: relative;
			display: flex;
			align-items: center;
			
			.s-input {
				flex: 1;
				padding-right: 100rpx;
			}
			
			.s-input-icon {
				position: absolute;
				width: 40rpx;
				height: 40rpx;
				top: 50%;
				transform: translateY(-50%);
				z-index: 1;
				
				&.clear-icon {
					right: 80rpx;
				}
				
				&:last-child {
					right: 20rpx;
				}
			}
		}

	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}
</style>